import { DrawerForm, ProFormText, ProFormSelect } from '@ant-design/pro-components';
import { Form } from 'antd';
import React, { useImperativeHandle, forwardRef, useState } from 'react';
import $http from '@/services/http.service.v2';
import { firstValueFrom } from "rxjs"

export default forwardRef(function RoleEditorDrawer(props, ref) {
  const [open, setOpen] = useState(false)
  const [form] = Form.useForm();
  useImperativeHandle(ref, () => ({
    open: (role) => {
      setOpen(true)
      form.setFieldsValue({...role});
    },
  }));
  return (
    <DrawerForm
      title="新建表单"
      width={360}
      form={form}
      open={open}
      onOpenChange={setOpen}
      drawerProps={{
        destroyOnClose: true,
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        const res = await firstValueFrom($http.updateRole(values)).catch(e => e)
        if (!res.status) {
          return
        }
        props.onFinish && props.onFinish(res)
        return true;
      }}
    >
      <ProFormText name="id" hidden />
      <ProFormText name="role_name" label="角色" />
      <ProFormText name="realm_name" label="服务器" />
      <ProFormSelect 
        name="craft_type" label="类型"
        initialValue={1}
        options={[
          { label: '订单', value: 1 },
          { label: '盟约', value: 2 },
        ]}
      />
    </DrawerForm>
  )
})